<script setup lang="ts">
import { usePrefix } from '@season-designable/vue';
import cls from 'classnames';
import { ref } from 'vue';

const prefix = usePrefix('position-input');

const emit = defineEmits(['change']);
const props = defineProps(['value']);
const current = ref(props.value);

const createCellProps = (position: string) => {
  return {
    class: cls(prefix + '-cell', { active: current.value === position }),
    onClick() {
      current.value = position;
      emit('change', position);
    },
  };
};
</script>

<template>
  <div :class="prefix">
    <div :class="prefix + '-row'">
      <div :="createCellProps('top')">┳</div>
    </div>
    <div :class="prefix + '-row'">
      <div :="createCellProps('left')">┣</div>
      <div :="createCellProps('center')">╋</div>
      <div :="createCellProps('right')">┫</div>
    </div>
    <div :class="prefix + '-row'">
      <div :="createCellProps('bottom')">┻</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../../../../styles.scss';

.dn-position-input {
  display: flex;
  flex-direction: column;

  &-row {
    display: flex;
    justify-content: center;
  }

  &-cell {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    color: rgba(0, 0, 0, 0.6);
    margin: 5px;
    color: $text-color;

    &.active {
      background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    }
  }
}
</style>
